<template>
<!--  <el-dialog :visible="showDigitalHuman" :before-close="closeDialog" :close-on-click-modal="false" append-to-body class="generateCont" center width="50%" title="智能生成数字人授课视频">-->
    <div style="display: flex;flex-direction: column;align-items: center;justify-content: space-around;height: 300px">
      <el-upload
          v-loading="uploadLoading"
          ref="upload"
          :limit="1"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :before-upload="handleBeforeUpload"
          :on-change="handleFileChange"
          :auto-upload="false"
          :file-list="dhFileData?[dhFileData]:[]"
          class="upload-box"
          action=""
          accept=".ppt,.pptx"
          drag>
        <el-alert :closable="false" title="* 试用期间仅生成一页PPT的授课视频" type="warning" />
        <div class="el-upload-area">
          <i class="el-icon-upload" style="font-size:50px;margin-top:5px;margin-right:10px;margin-bottom:10px;" />
          <div class="el-upload__text">
            将文件拖拽到此处，或 <em>点击上传</em>
            <div class="upload_tip">* 只能上传ppt文件</div>
          </div>
        </div>
      </el-upload>
      <div class="digitalHumanFooter">
        <el-button type="primary" size="medium" @click="startGenerate">开始生成</el-button>
      </div>
    </div>
<!--  </el-dialog>-->
</template>
<script>
import { upload2 } from '@/utils/request.js'
import { mapState } from 'vuex'
export default {
  props: {
    showDigitalHuman: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uploadLoading: false,
      dhFileData: '',
      generateNotify: null
    }
  },
  computed: {
    ...mapState({
      zlBaseUrl: state => state.app.zlBaseUrl
    })
  },
  watch: {
    showDigitalHuman(newVal) {
      this.dhFileData = null
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog', false)
    },
    handleError() {
      this.$message.error('文件上传失败！')
      this.uploadLoading = false
    },
    handleRemove() {
      this.dhFileData = ''
    },
    handleExceed() {
      this.$message.error('只能上传一个文件！')
    },
    handleFileChange(file) {
      this.dhFileData = file
    },
    handleBeforeUpload() {
      this.uploadLoading = true
    },
    handleSuccess() {
      this.$message.success('文件上传成功！')
      this.uploadLoading = false
    },
    startGenerate() {
      if (!this.dhFileData) {
        this.$message.error('请上传文件！')
        return
      }
      this.closeDialog()

      // this.generateNotify = this.$notify({
      //   title: '正在生成中',
      //   type: 'warning',
      //   dangerouslyUseHTMLString: true,
      //   message: '<div style="padding:10px;font-size:16px;"><i class="el-icon-loading" style="font-size:20px;margin-right:10px;color:#FFBA00;"></i>正在生成数字人授课视频...</div>',
      //   showClose: false,
      //   duration: 0
      // })
      // setTimeout(() => {
      //   this.generateNotify.close()
      //   this.generateNotify = this.$notify({
      //     title: '成功提示',
      //     type: 'success',
      //     dangerouslyUseHTMLString: true,
      //     message: '数字人授课视频生成成功',
      //     showClose: false,
      //     duration: 2000
      //   })
      //   this.$emit('complete', 'https://aiexamehelip.c2.eplus.org.cn/humanapi/download/111222332344554')
      // }, 5000)
      // return
      upload2('/apivideo/digital_human', this.dhFileData.raw, { id: `dh_${new Date().getTime()}` }).then(res => {
        if (res.data.addr) {
          this.$message.success('正在生成数字人授课视频')
          this.$emit('complete', `${this.zlBaseUrl}/apivideo${res.data.addr}`)
        } else {
          this.$message.error(res.error)
          this.$emit('complete', false)
        }
      }, err => {
        console.log(err)
        this.$message.error('生成失败')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.generateCont {
  /deep/.el-dialog__title {
    font-size: 20px !important;
    font-weight: bold;
  }
  /deep/.el-dialog__body {
    padding: 25px 25px 20px;
  }
  .digitalHumanFooter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .el-button {
      width: 120px;
    }
  }
  .upload-box {
    width: 80%;
    height: 300px;
    margin:auto !important;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    background: #3daefe0d;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /deep/.el-upload, /deep/.el-upload-dragger {
      width: 100% !important;
      height: 100% !important;
    }
    .el-upload-area {
      width: 100%;
      height: 80%;
      display: flex; /* 使用弹性布局来确保内容居中 */
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
      position: relative;
    }
    /deep/.el-loading-mask {
      background: rgba(226, 226, 226, 0.9) !important;
    }
    .el-upload__text {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      position: relative;
      .upload_tip {
        font-size: 14px;
        font-weight: normal;
        color: #f57a29;
        margin-top: 10px;
        position: absolute;
        right: 0;
      }
    }
  }

  /deep/ .el-loading-spinner::after{
    content: '正在上传文件';
    color: #007bff;
    font-size: 15px;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
  }
  /deep/.el-upload-dragger {
    padding: 0; /* 去除内边距 */
    margin: 0; /* 去除外边距 */
    border: none !important; /* 如果有边框也去除 */
    background-color: transparent !important;
  }
}
</style>
